<template>
  <div>
    <div style="height: 40px; background-color: #1989fa">
      <van-icon name="arrow-left" color="#fff" style="float: left; margin-top: 5px;" size="30px"/>
    </div>
    <van-form @submit="onSubmit" style="margin-top: 10px;">
      <van-cell-group title="请设置密码并填写个人信息">
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="6-20位"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="rePassword"
          type="password"
          name="rePassword"
          label="重复密码"
          placeholder=""
          :rules="[{ validator: checkRepassword, message: '两次密码填写不一致'}]"
        />
      </van-cell-group>
      <div style="height: 10px; background-color: #f7f7f7"></div>
      <van-cell-group title="">
        <van-field
          v-model="name"
          type="name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '姓名不能为空'}]"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="birthdayField"
          is-link
          readonly
          label="出生年月"
          placeholder="请选择出生年月"
          @click="showBirthdayPicker = true"
        />
        <van-popup v-model="showBirthdayPicker" round position="bottom">
          <van-cascader
            v-model="birthday"
            title="请选择出生年月"
            active-color="#1989fa"
            :options="options"
            @close="showBirthdayPicker = false"
            @finish="onFinish"
            :rules="[{ required: true, message: '出生年月不能为空'}]"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="education"
          :value="education"
          label="最高学历"
          placeholder="点击选择最高学历"
          @click="educationPickerShow = true"
        />
        <van-popup v-model="educationPickerShow" position="bottom" style="height: 70%">
          <van-search v-model="educationSearchValue" placeholder="请输入学校关键词" style="margin-top: 20px"/>
          <div v-for="(item, index) in schoolFeed" :key="index">
            <div style="height: 3px; background-color: #f7f7f7"></div>
            <div style="line-height: 40px;" @click="schoolSelect(item)">
              <span>{{item}}</span>
            </div>
            <div style="height: 3px; background-color: #f7f7f7"></div>
          </div>
        </van-popup>

        <van-field
          readonly
          clickable
          name="major"
          :value="major"
          label="所学专业"
          placeholder="点击选择所学专业"
          @click="majorPickerShow = true"
        />
        <van-popup v-model="majorPickerShow" position="bottom" style="height: 70%">
          <van-search v-model="majorSearchValue" placeholder="请输入专业关键词" style="margin-top: 20px"/>
          <div v-for="(item, index) in majorFeed" :key="index">
            <div style="height: 3px; background-color: #f7f7f7"></div>
            <div style="line-height: 40px;" @click="majorSelect(item)">
              <span>{{item}}</span>
            </div>
            <div style="height: 3px; background-color: #f7f7f7"></div>
          </div>
        </van-popup>

        <van-field
          v-model="workUnit"
          name="workUnit"
          label="工作单位"
          placeholder="请输入工作单位"
          :rules="[{ required: true, message: '请输入工作单位' }]"
        />
        <van-field
          v-model="position"
          name="position"
          label="职位"
          placeholder="请输入职位"
          :rules="[{ required: true, message: '请输入职位' }]"
        />
        <van-field
          v-model="phoneNumber"
          name="phoneNumber"
          label="手机"
          placeholder="请输入手机号码"
          :rules="[{ validator: checkPhoneNumber, message: '请输入有效的的11位手机号码' }]"
        />
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ validator: checkEmail, message: '请输入有效的邮箱' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import schoolData from '../../assets/js/schoolsData'
import majorsData from '../../assets/js/majorsData'
export default {
  components: {
    schoolData,
    majorsData
  },
  data () {
    return {
      name: '',
      password: '',
      rePassword: '',
      sex: '男',
      showCalendar: false,
      birthdayField: '',
      birthday: '',
      showBirthdayPicker: false,
      education: '',
      educationPickerShow: false,
      majorPickerShow: false,
      educationSearchValue: '',
      schoolNameList: [],
      major: '',
      majorSet: new Set(),
      majorSearchValue: '',
      workUnit: '',
      position: '',
      phoneNumber: '',
      email: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    checkRepassword () {
      return this.password === this.rePassword
    },
    checkPhoneNumber () {
      return this.phoneNumber.length === 11
    },
    checkEmail () {
      let emailReg = /^(\w|(\.\w+))+@([a-zA-Z0-9_-]+\.)+(com|org|cn|net)+$/
      return emailReg.text(this.email.toString())
    },
    onFinish ({selectedOptions}) { // 出生年月
      this.showBirthdayPicker = false
      this.birthdayField = selectedOptions.map((option) => option.text).join('/')
    },
    schoolSelect (schoolName) {
      this.education = schoolName
      this.educationPickerShow = false
    },
    majorSelect (majorName) {
      this.major = majorName
      this.majorPickerShow = false
    }
  },
  beforeCreate () {
    document.title = '个人用户注册'
  },
  created () {
    for (let key in schoolData) { // 获取所有学校名称，放入schoolNameList
      for (let lis of schoolData[key.toString()]) {
        this.schoolNameList.push(lis[2])
      }
    }
    for (let key in majorsData) { // 把所有专业放入majorSet
      for (let lis of majorsData[key.toString()]) {
        this.majorSet.add(lis[2])
      }
    }
    console.log(this.majorSet)
  },
  computed: {
    options () { // 生成出生年月的选项
      let res = []
      let now = new Date()
      let children = []
      for (let i = 1; i <= 12; i++) {
        children.push({text: i.toString(), value: i.toString()})
      }
      for (let i = now.getFullYear() - 18; i >= now.getFullYear() - 100; i--) {
        res.push({
          text: i.toString(),
          value: i.toString(),
          children: children
        })
      }
      return res
    },
    schoolFeed () { // 根据educationSearchValue返回推荐的学校名称
      let s = this.educationSearchValue
      if (s === '') return []
      let res = []
      for (let str of this.schoolNameList) {
        if (str.indexOf(s) !== -1) {
          res.push(str)
        }
      }
      return res
    },
    majorFeed () { // 根据majorSearchValue返回推荐专业
      let s = this.majorSearchValue
      if (s === '') return []
      let res = []
      for (let str of this.majorSet) {
        if (str.indexOf(s) !== -1) {
          res.push(str)
        }
      }
      return res
    }
  }
}
</script>
<style scoped>
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding-bottom: 10px;
  }
  .tabbar img {
    width: 36px;
    height: 36px;
  }
  .tabbar .tabbartitle {
    font-size: 18px;
    font-weight: bold;
    /* color: rgba(24, 147, 252, 1); */
  }
</style>
